<template>
  <div>
    <h1 ref="title">{{ msg }}</h1>
    <button ref="btn" @click="showDom">点击显示h1 dom</button>
    <school ref="school" />
  </div>

  <!-- 
        ## ref属性

        1. 被用来给元素或子组件注册引用信息（id的替代者）
        2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
        3. 使用方式：
        1. 打标识：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
        2. 获取：```this.$refs.xxx```


   -->
</template>

<script>
// 引入School组件
import School from "./components/School.vue";

export default {
  name: "app",
  components: { School },
  data() {
    return { msg: "欢迎学习Vue！" };
  },
  methods: {
    showDom() {
      console.log("###");
      console.log("@@@", this.$refs.title); //真实dom元素
      console.log("@@@", this.$refs.btn); //真实dom元素
      console.log("@@@", this.$refs.school); //school 组件 VC 实例
    },
  },
};
</script>

<style>
</style>